<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="dist/css/quicktab.css">

</head>

<body>

    <button onclick="add()">添加Tab</button>
    <div id="qtab"></div>

    <script src="dist/js/quicktab.js"></script>
    <script>

 


        const el = document.querySelector('#qtab')


        el.addEventListener('tab-activated', function (event) {
            console.log(`event:tab-activated url:${event.detail[1]}`);
        })


        el.addEventListener('tab-loaded', function (event) {
            console.log(`event:tab-loaded url:${event.detail[1]}`);
        })

        el.addEventListener('tab-timeout', function (event) {
            console.log(`event:tab-timeout url:${event.detail[1]}`);
        })

        el.addEventListener('tab-finally', function (event) {
            console.log(`event:tab-finally url:${event.detail[1]}`);
        })

        el.addEventListener('tab-all', function (event) {
            console.log(`event:tab-all`);
        })

        el.addEventListener('tab-loading-transitionend', function (event) {
            console.log(`event:tab-loading-transitionend url:${event.detail[1]}`);
        })

        el.addEventListener('tab-click', function (event) {
            console.log(`event:tab-click url:${event.detail[1]}`);
        })

        el.addEventListener('tab-double-click', function (event) {
            console.log(`event:tab-double-click url:${event.detail[1]}`);
        })

        el.addEventListener('tab-close', function (event) {
            console.log(`event:tab-close url:${event.detail[1]}`);
        })

        el.addEventListener('tab-close-all', function (event) {
            console.log(`event:tab-close-all`);
        })

        el.addEventListener('init', function (event) {
            console.log(`event:init`);
        })

        const tab = new Quicktab(el, {
            id: 'qtab',
            defaultTabs: [
                {
                    title: '欢迎页面1',
                    url: 'welcome.html',
                    closable:false
                },
                {
                    title: '欢迎页面2',
                    url: 'welcome.html?id=10'
                },
                {
                    title: '欢迎页面3',
                    url: 'welcome.html?id=333'
                }
            ],
            toolbar: {
                dropdown: {
                    enable: true
                }
            },
            tab: {
                mouseWheelSwitch: {
                    enable: true
                },
                dragSort: true,
                remember: true,
                contextmenu: {
                    enable: true
                },
                timeout:{
                    enable: false,
                    second:3000
                }
            },
            onTabActivated: function (url) {
                console.log(this);
            }
        })



        tab.on('tab-loaded', function (evt) {
            console.log(`on-event:tab-loaded url:${evt[1]}`);
        })

        tab.on('tab-timeout', function (evt) {
            console.log(`on-event:tab-timeout url:${evt[1]}`);
        })

        tab.on('tab-finally', function (evt) {
            console.log(`on-event:tab-finally url:${evt[1]}`);
        })

        tab.on('tab-all', function (evt) {
            console.log(`on-event:tab-all`);
        })

        tab.on('tab-loading-transitionend', function (evt) {
            console.log(`on-event:tab-loading-transitionend url:${evt[1]}`);
        })

        tab.on('tab-click', function (evt) {
            console.log(`on-event:tab-click url:${evt[1]}`);
        })

        tab.on('tab-double-click', function (evt) {
            console.log(`on-event:tab-double-click url:${evt[1]}`);
        })

        tab.on('tab-close', function (evt) {
            console.log(`on-event:tab-close url:${evt[1]}`);
        })

        tab.on('tab-close-all', function (evt) {
            console.log(`on-event:tab-close-all`);
        })


        function add() {

            tab.addTab({
                title: '新标签' + Math.random(),
                url: 'welcome.html?id=' + Math.random()
            })

        }

    </script>
</body>

</html>